<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		font-size: 9pt;
	}
	div{
		border: 1px solid #999999;
		margin: 20px;
		margin-bottom: 20px;
	}
	div  div{
		border: 1px dotted #ccc;
		font-size: 20px;
	}
</style>
<script>
	var img;
	var number=0;
	
	var start = function(){
		setTimeout(changeImg,1000);
	}
	
	var changeImg=function(){
		img = document.getElementById("img1");
		number++;
		number=number > 10?1:number;
		img.src="../images/img"+number+".jpg";
		start();		
	}	
	
	window.onload=function(e){
		start();
	}
</script>
</head>
<body>
	<div> 
		<h4>미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요.<br> 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우 다시 첫번째 이미지부터 출력시켜주세요.</h4>
		<div id="panel">
			<img id="img1" src="../images/img1.jpg" alt="이미지">
		</div>
	</div>
</body>
</html>